<template>
	<view class="uni-container">
		<uni-forms ref="form" :value="formData" validate-trigger="submit" err-show-type="toast">
			<uni-forms-item name="name" label="视频名称"><uni-easyinput placeholder="视频名称" v-model="formData.name" /></uni-forms-item>
			<uni-forms-item name="cover" label="封面图">
				<cloud-image placeholder="封面图" v-model="formData.cover"></cloud-image>
			</uni-forms-item>
			<uni-forms-item name="src" label="视频地址">
				<uni-file-picker
				limit="1" v-model="srcValues" 
				    fileMediatype="video" 
				    mode="grid" 
				    @select="select" 
				    @progress="progress" 
				    @success="success" 
				    @fail="fail" 
				></uni-file-picker>
				<video v-if="formData.src" :src="formData.src"></video>
				</uni-forms-item>
			<uni-forms-item name="duration" label="时长"><uni-easyinput disabled placeholder="时长，以秒为单位" type="number" v-model="formData.duration" /></uni-forms-item>
			<uni-forms-item name="course_id" label="课程分类">
				<el-select v-model="formData.course_id" placeholder="请选择课程">
										<el-option v-for="(item, inx) in queryCourse" :key="inx" :label="item.name" :value="item._id">
					</el-option>
				</el-select>
				<!-- <uni-data-checkbox v-model="formData.course_id" collection="courses" field="name as text, _id as value" /> -->
			</uni-forms-item>
			<uni-forms-item name="order" label="排序"><uni-easyinput placeholder="排序，正序" type="number" v-model="formData.order" /></uni-forms-item>

			<view class="uni-button-group"><button type="primary" class="uni-button" @click="submit">提交</button></view>
		</uni-forms>
	</view>
</template>

<script>
import { validator } from '../../js_sdk/validator/videos.js';

const db = uniCloud.database();
const dbCollectionName = 'videos';

function getValidator(fields) {
	let reuslt = {};
	for (let key in validator) {
		if (fields.indexOf(key) > -1) {
			reuslt[key] = validator[key];
		}
	}
	return reuslt;
}

export default {
	data() {
		return {
			queryCourse:{},
			srcValues:[],
			formData: {
				name: '',
				src: '',
				cover:'',
				duration: null,
				course_id: '',
				order: null
			},
			formOptions: {},
			rules: {
				...getValidator(['name', 'src', 'duration', 'course_id', 'order'])
			}
		};
	},
	onLoad(e) {
		this.courseList();
		const id = e.id;
		this.formDataId = id;
		this.getDetail(id);
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		courseList(){
			db.collection('courses')
				.field('_id,name,cover')
				.get()
				.then(res => {
					const data = res.result.data;
					if (data) {
						let resLi=[]
						data.forEach(item=>{
							resLi[item._id]=item.name
						})
						this.queryCourse=data
						this.courseLi = resLi;
					}
				})
				.catch(err => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					});
				})
				.finally(() => {
					uni.hideLoading();
				});
		},
		/**
		 * 触发表单提交
		 */
		submit() {
			uni.showLoading({
				mask: true
			});
			this.$refs.form
				.submit()
				.then(res => {
					this.submitForm(res);
				})
				.catch(errors => {
					uni.hideLoading();
				});
		},

		submitForm(value) {
			value.duration=parseInt(value.duration)
			// 使用 clientDB 提交数据
			db.collection(dbCollectionName)
				.doc(this.formDataId)
				.update(value)
				.then(res => {
					uni.showToast({
						icon: 'none',
						title: '修改成功'
					});
					this.getOpenerEventChannel().emit('refreshData');
					setTimeout(() => uni.navigateBack(), 500);
				})
				.catch(err => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					});
				})
				.finally(() => {
					uni.hideLoading();
				});
		},

		/**
		 * 获取表单数据
		 * @param {Object} id
		 */
		getDetail(id) {
			uni.showLoading({
				mask: true
			});
			db.collection(dbCollectionName)
				.doc(id)
				.field('name,src,duration,course_id,order,cover')
				.get()
				.then(res => {
					const data = res.result.data[0];
					if (data) {
						this.formData = data;
						this.srcValues=[data.src]
					}
				})
				.catch(err => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					});
				})
				.finally(() => {
					uni.hideLoading();
				});
		},
		// 获取上传状态
		select(e){
			console.log('选择文件：',e)
		},
		// 获取上传进度
		progress(e){
			console.log('上传进度：',e)
		},
		// 上传成功
		success(e){
			this.formData.src=e.tempFilePaths[0];
		},
		// 上传失败
		fail(e){
			console.log('上传失败：',e)
		}
	}
};
</script>

<style>
.uni-container {
	padding: 15px;
}

.uni-input-border,
.uni-textarea-border {
	width: 100%;
	font-size: 14px;
	color: #666;
	border: 1px #e5e5e5 solid;
	border-radius: 5px;
	box-sizing: border-box;
}

.uni-input-border {
	padding: 0 10px;
	height: 35px;
}

.uni-textarea-border {
	padding: 10px;
	height: 80px;
}

.uni-button-group {
	margin-top: 50px;
	display: flex;
	justify-content: center;
}

.uni-button {
	width: 184px;
	padding: 12px 20px;
	font-size: 14px;
	border-radius: 4px;
	line-height: 1;
	margin: 0;
}
</style>
